<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../includes/jqueryui/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="../includes/jqueryui/js/jquery-ui-1.8.13.custom.min.js"></script>
    <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8"></script>
      
    <style type="text/css">
      ul {list-style: none}
      .drag-me {
        width : 20px ;
        height: 20px ;
        background: blue ;
        margin: 4px ;
        float:left;
      }
    </style>
    <script type="text/javascript" >
    $(function(){
      $('.drag-me').draggable({ revert: true , iframeFix: false });
      $('.drop-here','#myiframe').droppable({
        drop : function(event,ui){
          console.dir(event)
          console.dir(ui)
        }
      });
      /*
      $('#myiframe-wrapper').droppable({
        drop : function(event,ui){
          window.frames.myiframe.joc_drop(event,ui)
        }
      });
    */
      var my = window.frames.myiframe
      my.joc_drop = function(event,ui){
        console.dir(ui)
        /*
        var el = my.$(event.srcElement.outerHTML)
        el.attr('style','')
        el.appendTo(my.$('.drop-here ul'))
        */
        my.$(ui.helper).appendTo(my.$('.drop-here ul'))
        my.$('.drop-here ul').sortable()
        my._click()
      };
    })
    </script>
  </head>
  <body>
    <div>TODO write content</div>
    <div id="myiframe-wrapper" style="margin-left:200px;width:200px;width:200px">
      <iframe src="newhtml.html"  id="myiframe" name="myiframe" width="200px" height="200px" ></iframe>
    </div>
  <ul>
    <li id="drag" class="drag-me">0</li>
    <li class="drag-me">1</li>
    <li class="drag-me">2</li>
    <li class="drag-me">3</li>
    <li class="drag-me">4</li>
    <li class="drag-me">5</li>
    <li class="drag-me">6</li>
    <li class="drag-me">7</li>
  </ul>
  </body>
</html>

